<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        	html, body {
			margin: 0;
			padding: 0;
		}
        #main {
			background: url(./img/bg.jpg) 0 0 no-repeat;
			width: 556px;
			height: 535px;
			margin: 10px auto;
			position: relative;
			display: block;
		}
        #showbox {
			position: absolute;
			top: 100px;
			left: 10px;
			height: 270px;
			width: 385px;
			display: block;
			font-size: 16px;
			overflow: auto;
		}
        textarea {
			border: none;
			position: absolute;
			width: 385px;
			height: 75px;
			left: 10px;
			top: 415px;
			font-size: 16px;
		}
        select {
			position: absolute;
			top: 381px;
			left: 5px;
		}
        input {
			position: absolute;
			top: 505px;
			left: 320px;
			width: 80px;
			cursor: pointer;
		}
        #showbox div {
			width: 20px;
			display: inline-block;
			font-size: 16px;
			margin: 2px 0;
		}
        div img {
			width: 16px;
			height: 16px;
		}
    </style>
    <script>
        window.onload = function(){
            var showbox = document.getElementById("showbox"),
                select = document.getElementsByTagName("select")[0],
                textarea = document.getElementsByTagName("textarea")[0],
                btn = document.getElementsByTagName("input")[0],
                json = {
                    'balloon':'./img/balloon.png',
                    'love':'./img/heart.gif',
                    'knife':'./img/knife.gif',
                    'jiong':'./img/jiong.gif',
                    'shuai':'./img/shuai.gif'
                };
            // jquery中用attr()方法来获取和设置元素属性
            //          for(attr in json){
                        
            //          }
                btn.onclick = function(){
                    var str = textarea.value;
                    if(str == ''){
                        alert('请输入内容后点击发送')
                    }
                    if(select.value == 'default'){
                        showbox.innerHTML += str + '<br/>';
                        textarea.value = ''
                    }
                  
                    for( key in json){
                        changeStyle(key,json[key],str);
                    }
                }
                function changeStyle(fontStyle,url,str){
                    if(select.value == fontStyle){
                        //split 用于把一个字符串分割成字符串数组
                        var arr = str.split('');
                        str = '';
                        for(var i = 0; i < arr.length; i++){
                            str += '<div><img src=" ' + url +' "><span>' + arr[i] + '<span></div>'
                        }
                        showbox.innerHTML += str + '<br/>';
                        textarea.value = '';
                    }
                }
        }
     
    </script>
</head>
<body>
        <div id="main">
                <div id="showbox">
                    
                </div>
                <select name="fontStyle" id="fontStyle">
                    <option value="balloon">气球字体</option>
                    <option value="love">表白字体</option>
                    <option value="knife">砍刀字体</option>
                    <option value="jiong">囧人字体</option>
                    <option value="shuai">衰人字体</option>
                    <option value="default" selected>默认字体</option>
                </select>
                <textarea></textarea>
                <input type="button" value="发送">
            </div>
</body>
</html>